{% extends "base.html" %}

{% block style %}
    <link rel="stylesheet" type="text/css" href= "/static_media/css/user/editOutcrop.css">
{% endblock style %}

{% block script %}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHPN4aDb1OTOiMkDGZcuRJd4cFd-ceXds&sensor=false"></script>
    <script type="text/javascript">
		function init()
		{
			var blueIcon = {
				url:"/static_media/images/pin_blue.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51)
			}

			var smallShadow = {
				url:"http://labs.google.com/ridefinder/images/mm_20_shadow.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51),
				scaledSize: new google.maps.Size(34, 55)
			}
			
			var mapOptions = {
			  //center map on the UK
			  center: new google.maps.LatLng({{outcrop.latitude}}, {{outcrop.longitude}}),
			  zoom: 14,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
							
			var map = new google.maps.Map(document.getElementById("map"), mapOptions);
			
			google.maps.event.addListener(map, 'click', function(event) {
				document.getElementById("id_latitude").value=event.latLng.lat();
				document.getElementById("id_longitude").value=event.latLng.lng();
				placeMarker(event.latLng);
			});
			
			var marker = new google.maps.Marker({position: new google.maps.LatLng({{outcrop.latitude}}, {{outcrop.longitude}}), map: map, icon:blueIcon });
			
			function placeMarker(location) {
				marker.setPosition(location);
				map.setCenter(location);
			}
		}
    </script>
{% endblock script %}

{% block content %}

      <!-- .left -->
      <div class="left">
		<div id="accordionMenu" class="accordion">
				<style type="text/css">
		.accordion #one:target .heading + .menuContent {
			height:{{height}}px;
		}
		</style>
				<div id="one" class="section">
					<div class ="heading"> <a href="#one">My Excursions</a> </div>
					<div class="menuContent">
						<ul>
							{% for excursion in my_excursions %}
							<li> <a href="/user/excursion/{{ excursion.pk }}/ ">{{ excursion.name }}</a> </li>
							{% endfor %}
						</ul>
					</div>
				</div>
				<div id="two" class="section">
					<div class ="heading"> <a href="#two">My Images</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/images/">My Images</a> </li>
						</ul>
					</div>
				</div>
				<div id="three" class="section">
					<div class ="heading"> <a href="#three">Create</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/new_excursion/">Excursion</a> </li>
						</ul>
					</div>
				</div>
			</div>
      </div>
      <!-- end .left -->
      
      <!-- .right -->
      <div class="right">
      		<div class="item">
            	<div class="itemHeading">
                	Outcrop Information
                </div>
				<div id="map"></div>
              	<form action="/user/outcrop/edit/{{outcrop.pk}}/" method="post" class="formItem"> {% csrf_token %}
                  	<div class="fieldError"> {{ form.non_field_errors }} </div>
                        
                   	<label for="id_name" class="fieldHeading" >Outcrop Name</label>
                    <div class="fieldError"> {{ form.name.errors }} </div>
                    <div class="fieldWrapper"> {{ form.name }} </div>

                    <label for="id_description" class="fieldHeading" >Outcrop Description</label>
                    <div class="fieldError"> {{ form.description.errors }} </div>
                    <div class="fieldWrapper"> {{ form.description }} </div>
                    
                    {{ form.longitude.as_hidden }}
                    {{ form.latitude.as_hidden }}
					<input type="submit" value="Save Changes" id="saveButton" class="button"/>
            	</form>
		    </div>    		   
      </div>
{% endblock content %}
